import {ActivityIndicator, Modal, StyleSheet, View} from 'react-native';
import {
  primaryColor,
  primaryHeaderBackgroundColor,
} from '../../../theme/default';

type LoadingModalProp = {
  visible: boolean;
  borderColor?: string;
};

export default function LoadingModal({
  visible,
  borderColor,
}: Readonly<LoadingModalProp>) {
  return (
    <Modal transparent={true} visible={visible}>
      <View style={styles.modalOverlay}>
        <View
          style={{
            ...styles.modalContent,
            borderColor: borderColor ?? primaryColor,
          }}>
          <ActivityIndicator size="large" color={primaryColor} />
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: primaryHeaderBackgroundColor,
    borderRadius: 10,
    borderWidth: 1,
    width: 96,
    alignItems: 'center',
    justifyContent: 'center',
    height: 96,
  },
});
